import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ParkDataProvider } from '../../providers/park-data/park-data';
import { Park } from '../../providers/park-data/park';
import { ParkDetailPage } from '../park-detail/park-detail';


// 声明高德地图对象AMap
declare var AMap:any;


/**
 * Generated class for the ParkMapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-park-map',
  templateUrl: 'park-map.html',
})
export class ParkMapPage {

  @ViewChild('map_container') map_container:ElementRef;

  private map: any;
  private parks: Park[] = [];
  private markers:any[] = [];

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    public parkDataProvider: ParkDataProvider
    ) {
  }

  ionViewDidLoad() {
    this.initAMap();
    // this.setMarker();
    this.setData();
  }

  initAMap(){
    this.map = new AMap.Map(this.map_container.nativeElement, {
      resizeEnable: true,
      zoom:11,//级别
      // center: [116.397428, 39.90923],//中心点坐标
  });

  // 加载插件
  AMap.plugin(['AMap.ToolBar','AMap.Geolocation'],
      ()=>{
      this.map.addControl(new AMap.ToolBar());
      let geolocation = new AMap.Geolocation();
      geolocation.getCurrentPosition(
        (status,result)=>{
          console.log(`精确定位:${status}`);
          console.log(result);          
        }
      );
      geolocation.getCityInfo(
        (status,result)=>{
          console.log(`城市定位: ${status}`);
          console.log(result);          
        }
      );
      
      this.map.addControl(geolocation);
    }
  );
  }
   
  setMarker(parks: Park[]){
    parks = parks.slice(0,10);
    console.log(parks);

    parks.forEach(park => {
      let [lng, lat] = park.point.split(',');
      let marker = new AMap.Marker({
        position: new AMap.LngLat(lng,lat),
        title: park.name,
        label: {content: park.name, offset: new AMap.Pixel(20, -10)},
        clickable : true
      });
      marker.on('click',event=>{
        console.log(`点击经纬度为：[${event.lnglat.getLat()},${event.lnglat.getLng()}]`);
        this.navCtrl.push(ParkDetailPage,{park:park});
      });
      this.markers.push(marker);
    });

   
    this.map.add(this.markers);
  }

  setData(){
    this.parkDataProvider.getCount().toPromise()
    .then(total=>{
      console.log(`记录总数：${total}`);
      return this.parkDataProvider.getAllParks(total).toPromise();
    }).then(data=>{
      data.forEach(_parks => {
        this.parks = this.parks.concat(_parks);
      });
      console.log(`Parks集合大小：${this.parks.length}`);
      
    });
  }

}
